<template>
  <div id="p-loading">
    <el-progress v-show="show" :percentage="rate" status="success" :stroke-width="3" :show-text="false"/>
  </div>
</template>

<script>
import config from "@/config";

export default {
  name: "ProgressLoading",
  data() {
    return {
      rate: 0,
      show: false,
      time: config.PROGRESS_TIME, // 开始显示进度条的时间
      startTimer: null, // 定时启动进度条的计时器
      incrTimer: null, // 定时增加进度条的计时器
    }
  },
  mounted() {
    this.$bus.$on('progress-start', () => {
      console.log('progress-start');
      this.rate = 0;
      this.show = false;
      clearTimeout(this.startTimer);
      clearInterval(this.incrTimer);
      this.startTimer = setTimeout(() => {
        this.show = true;

        this.incrTimer = setInterval(() => {
          this.rate++;
          if (this.rate >= 95) {
            clearInterval(this.incrTimer);
          }
        }, 20);
      }, this.time);

    });
    this.$bus.$on('progress-close', () => {
      clearTimeout(this.startTimer);
      clearInterval(this.incrTimer);
      this.rate = 100;
      setTimeout(() => this.show = false, 300);
    });
  },
}
</script>

<style scoped lang="scss">
#p-loading {
  width: 100%;
  height: 5px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0);
  pointer-events: none;
  ::v-deep .el-progress-bar__inner {
    transition: width 0.3s ease;
  }
}
</style>